<template>
    <div>
        <van-list v-model="loading" :finished="finished" finished-text="到底啦" @load="onLoad" :immediate-check="false"
            :offset="50">
            <div class="video-detials">
                <div class="video-detial" v-for="(item, index) in videoResultList" :key="index "
                    :data-videoLiveId="item.videoLiveId" :data-contentTitle="item.contentTitle" :data-mainId="item.mainId"
                    @click="goVideo(item.h5Url, item.id,item.videoLiveId, item.contentTitle,item.mainId,item.videoId)">
                    <img :src="item.coverUrl + '?x-oss-process=image/resize,m_fixed,h_210,w_335'">
                    <div class="min" v-if="item.duration">{{ item.duration | formatTime }}</div>
                    <div class="video-info">
                        <div class="title">{{ item.contentTitle }}</div>
                        <div class="author">
                            <div class="tag">{{ item.tagName }}</div>
                            <div class="name">{{ item.author }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import fun from "@/util/function";
export default {
    props: {
        videoResultList: {
            type: Array,
        },
        listFinished: {
            type: Boolean,
            default: false
        },
        listLoading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            finished: this.listFinished,
            loading: this.listLoading,
        }
    },
    methods: {
        //判断url跳转方式
        isZxjtUrl(url) {
            let arrUrl = ['https://testlive.csc108.com', 'https://live.csc108.com/', 'https://sit.dzhlive.com']
            let flag = arrUrl.some(item => {
                return url.includes(item)
            })
            return flag
        },
        //点击视频跳转
        goVideo(url, id, videoLiveId,title, mainId ,videoId) {
            let flag = this.isZxjtUrl(url)
            if (flag) {
                if (videoId) {
                    let params = {
                        path: `/${this.$channel}/liveBack/${videoId}`,
                        query: {
                            dzhPage: 'true'
                        }
                    }
                    this.$router.push(params)
                } else {
                    let item = {
                        linkType: 2,
                        link: `{"type": 19,"loadUrl": "${url}","userdata": {"type":"dazhihui"}}`
                    }
                    fun.zxjtAppLink(item)
                }
                
            }else if (id) {
                let params = {
                    path: `/${this.$channel}/liveBack/${id}`,
                    query: {
                        dzhPage: 'true'
                    }
                }
                this.$router.push(params)
            }else {
                const params = {
                    'linkType': 1,
                    'link':url
                }
                fun.linkUrlFloatVideo(params)
            }
            this.$emit('fromVideoListInfo', {
                type:'click',
                videoLiveId,
                title,
                mainId
            })
        },
        //获取下一页数据
        onLoad() {
            this.$emit('getNextPage')//有需要分页的话，父组件接收事件
        },
        //曝光率方法
        obServerDom(selectDom) {
            //异步 this.$nextTick()
            const ob = new IntersectionObserver((entries) => {
                entries.forEach((i) => {
                    if (i.isIntersecting) {//进入视口
                        let videoLiveId = i.target.getAttribute('data-videoLiveId')
                        let title = i.target.getAttribute('data-contentTitle')
                        let mainId = i.target.getAttribute('data-mainId')
                        this.$emit('fromVideoListInfo', {
                            type: 'exposure',
                            videoLiveId,
                            title,
                            mainId
                        })
                    }
                    //ob.unobserve(target)//取消观察
                });
            }, {
                //配置项
                root: null,
                threshold: 1.0,
                rootMargin: '0px',
            })
            const queryDom = document.querySelectorAll(selectDom);
            queryDom.length && queryDom.forEach((item) => {
                ob.observe(item)
            })
        },
    },
    mounted() {
        this.obServerDom('.video-detial')
    },
    filters: {
        //将秒为单位的时间转换成00:00:00
        formatTime(s) {
            let hour = Math.floor(s / 3600) > 10 ? Math.floor(s / 3600) : "0" + Math.floor(s / 3600)
            let min = Math.floor(s % 3600 / 60) > 10 ? Math.floor(s % 3600 / 60) : "0" + Math.floor(s % 3600 / 60)
            let sec = Math.floor(s % 60) > 10 ? Math.floor(s % 60) : "0" + Math.floor(s % 60)
            return hour + ":" + min + ":" + sec
        }
    },
    watch: {
        //保证传进来的两种状态要跟finished和loading同步
        listLoading(newValue) {
            this.loading = newValue
        },
        listFinished(newValue) {
            this.finished = newValue
        }
    }

}
</script>

<style scoped lang="less">
.video-detials {
    width: 100%;
    height: auto;
    margin: 26px 0;
    display: grid;
    grid-template-columns: 335px 335px;
    gap: 35px 20px;

    .video-detial {
        width: 335px;
        height: 315.22px;
        border-radius: 20px 20px 0 0;
        overflow: hidden;
        position: relative;

        img {
            width: 335px;
            height: 210px;
            border-radius: 20px;
        }

        .min {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 104px;
            height: 30px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .video-info {
            margin-top: -5px;
            width: 100%;
            height: calc(100% - 210px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .title {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 16px;
                font-size: 30px;
                font-weight: 600;
                color: #262E40;
            }

            .author {
                display: flex;
                width: 100%;

                .tag {
                    width: 108px;
                    height: 36px;
                    background-color: #FEE4B0;
                    font-size: 22px;
                    line-height: 35px;
                    text-align: center;
                    border-radius: 12px 5px;
                    color: #B67531;
                    font-weight: 400;
                }

                .name {
                    width: calc(100% - 108px);
                    padding-left: 9px;
                    font-size: 24px;
                    font-weight: 400;
                    line-height: 36px;
                    color: #50596D;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

/deep/ .van-list__finished-text {
    font-size: 25px;
}

/deep/ .van-loading__text {
    font-size: 25px;
}
</style>